<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 600px;
            border: 1px solid #000;
        }

        ul li {
            width: 400px;
            margin: 5px 0;
            background: #6ff;
        }

        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <button>新增</button>
        <li class="active">01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
    </ul>
</body>
<script>
    // 事件委托
    // 把子元素的事件委托给父元素执行   
    //  优点  
    // 1. 代码结构结构简单  优化内存
    // 2. 可以给未来元素(将来可能新增的元素)绑定事件



    var ul = document.querySelector("ul");
    var liList = ul.getElementsByTagName("li");  //初始  10*li
    var btn = document.querySelector("button");
    // for (let i = 0; i < liList.length; i++) {
    //     let li = liList[i];
    //     li.onclick = function () {
    //         for (var i = 0; i < liList.length; i++) {
    //             liList[i].className = "";
    //         }
    //         this.className = "active";
    //     }
    // }

    var i = 10;
    btn.onclick = function () {
        var li = document.createElement("li");
        i++;
        li.innerHTML = i;
        ul.appendChild(li);

    }



    // 事件委托
    ul.onclick = function (e) {
        // console.log(111111);
        // console.dir(e.target);

        if (e.target.tagName.toLowerCase() == "li") {
            console.log(e.target);
            for (var i = 0; i < liList.length; i++) {
                liList[i].className = "";
            }
            e.target.className = "active";
        }
    }


</script>

</html>